<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
	<link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css">
	<style>
		#orderby{
			text-align: center;
			display: inline-block;
			margin-top: 20px;
			float: right;
			width: 40%;
			/*border: 2px solid gainsboro;*/
		}
		#orderlef{
			display: inline-block;
			margin-top: 20px;
			float: left;
			width: 58%;
			text-align: center;
		}
		#title{
			margin-top: 30px;
			text-align: center;
		}
        #leftitle{
			font-size: 20px;
		}
		#rightitle{
			font-size: 20px;
		}
	</style>
</head>
<body>
 <div id="app">
	 <div id="title">
		 <el-form :inline="true" :model="formInline" class="demo-form-inline">
		   <el-form-item label="交易编号">
			 <el-input v-model="formInline.user" placeholder="请输入交易编号"></el-input>
		   </el-form-item>
		   <el-form-item>
			 <el-button type="primary" @click="onSubmit">查询</el-button>
			 <el-button @click="findtable">全部</el-button>
		   </el-form-item>
		 </el-form>
	 </div>


	 <diV id="orderby" class="switch">
		 <el-tag type="warning" id="rightitle">&nbsp;订&nbsp;单&nbsp;详&nbsp;情</el-tag>
		 <template>
			 <el-table
					 :data="tableTail"
					 style="width: 100%"
					 border
					 max-height="400">
				 <el-table-column
						 fixed
						 prop="saleId"
						 label="销售编号"
						 width="100">
				 </el-table-column>
				 <el-table-column
						 prop="commodityId"
						 label="商品编号"
						 width="120">
				 </el-table-column>
				 <el-table-column
						 prop="userId"
						 label="用户编号"
						 width="120">
				 </el-table-column>
				 <el-table-column
						 prop="saleQuantity"
						 label="销售数量"
						 width="120">
				 </el-table-column>
				 <el-table-column
						 prop="saleAmount"
						 label="销售金额"
						 width="100">
				 </el-table-column>
				 <el-table-column
						 prop="transactionId"
						 label="交易编号"
						 width="150">
				 </el-table-column>
				 <el-table-column
						 prop="saleDate"
						 label="销售日期"
						 width="150">
				</el-table-column>
			 </el-table>
		 </template>
	 </diV>

	 <div id="orderlef">
		 <el-tag type="success" id="leftitle">&nbsp;交&nbsp;易&nbsp;信&nbsp;息</el-tag>
		 <template>
		   <el-table
			 :data="tableData"
			 height="400"
			 @row-dblclick="tableclick"
			 border
			 style="width: 100%">
			 <el-table-column
			   prop="transactionId"
			   label="交易编号"
			   width="150">
			 </el-table-column>
			 <el-table-column
			   prop="userId"
			   label="用户编号"
			   width="150">
			 </el-table-column>
			 <el-table-column
			   prop="transactionAmount"
			   label="交易金额"
			   width="150">
			 </el-table-column>
			 <el-table-column
			   prop="cardNumber"
			   label="会员卡号"
			   width="180">
			 </el-table-column>
			 <el-table-column
			   prop="transactionDate"
			   label="交易日期">
			 </el-table-column>
		   </el-table>
		 </template>
	 </div>

 </div>
 <script src="../js/vue.js"></script>
 <script src="../element-ui/lib/index.js"></script>
 <script src="../js/axios-0.18.0.js"></script>
 <script>
	   var Main = {
		   created(){
			   this.findtable();
		   },
	       methods: {
	         deleteRow(index, rows) {
	           rows.splice(index, 1);
	         },
			 tableclick:function(row) {
			 	 // alert("乱点你个头！！！:"+row.transactionId);
				  var transactionId=row.transactionId;
				 // console.log(row.transactionId);
				 axios.get('../order',{params:{op:"finds",transactionId:transactionId}}).then(response => {
					 this.tableTail=response.data.data;
				 });
			 },
			 findtable(){
				 axios.get('../order',{params:{op:"findAll"}}).then(response => {
                          this.tableData=response.data.data;
				 })
			 },
			   onSubmit() {
				   // console.log("hweuL:"+this.formInline.user);
				   var transactionId=this.formInline.user;
				   axios.get('../order',{params:{op:"findone",transactionId:transactionId}}).then(response => {
					   this.tableData=response.data.data;
					   this.tableTail=[];
				   })
			   }
	       },
	       data() {
	         return {
	             tableData: [],
				 tableTail:[],
				 formInline: {
					 user: '',
					 region: ''
				 }
	         }
	       }
	     }
	 var Ctor = Vue.extend(Main)
	 new Ctor().$mount('#app');
 </script>
 
</body>
</html>